<!DOCTYPE html>
<html lang="zh">
<head>
  <#assign title="菜单管理">
  <#include "/head.html">
</head>
  
<body>
<div class="container-fluid p-t-15">
  
  <div class="row">
    
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
        
          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary m-r-5" onclick="addMenu(-1, '新增一级菜单')">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增一级菜单
            </button>
            <button id="btn_cache" type="button" class="btn btn-default m-r-5" onclick="removeCache()">
              <span class="mdi mdi-delete" aria-hidden="true"></span>删除缓存
            </button>
          </div>
          
          <table class="tree-table"></table>
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<#include "/footer.html">

<script type="text/javascript">
var prefix = "system/menu";
var listUrl = prefix + '/list';

// tree-grid使用
var $treeTable = $('.tree-table');
$treeTable.bootstrapTable({
	url: listUrl,
    idField: 'id',
    uniqueId: 'id',
    dataType: 'json',
    toolbar: '#toolbar',
    columns: [
        {
            field: 'name',
            title: '名称'
        }, {
            field: 'status',
            title: '状态',
            formatter: function (value, row, index) {
                if (value == 0) {
                    is_checked = '';
                } else if (value == 1){
                    is_checked = 'checked="checked"';
                }
                var result = '<div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="customSwitch'+ row.id +'" '+ is_checked +'><label class="custom-control-label" for="customSwitch'+ row.id +'" onClick="updateStatus('+ row.id +', '+ value +')"></label></div>';
            
                return result;
            },
        }, {
            field: 'url',
            title: 'url'
        }, {
            field: 'permissionValue',
            title: '权限值'
        }, {
            field: 'icon',
            title: '图标',
            formatter: function (value, row, index) {
            	var result = value;
            	if (value) {
            		result = '<i class="' + value + '"></i>';
            	}
            
                return result;
            }
        }, {
            field: 'operate',
            title: '操作',
            align: 'center',
            events : {
                'click .add-btn': function (e, value, row, index) {
                    addMenu(row.id, '新增菜单');
                },
                'click .delete-btn': function (e, value, row, index) {
                    del(row.id);
                },
                'click .edit-btn': function (e, value, row, index) {
                    update(row.id, '编辑菜单');
                }
            },
            formatter: operateFormatter
        }
    ],
    
    treeShowField: 'name',
    parentIdField: 'pid',
    
    onResetView: function(data) {
        $treeTable.treegrid({
            initialState: 'collapsed', // 所有节点都折叠
            treeColumn: 0,
            //expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
            //expanderCollapsedClass: 'mdi mdi-folder',
        });
        
        // 只展开树形的第一集节点
        $treeTable.treegrid('getRootNodes').treegrid('expand');
    },
    onCheck: function(row) {
        var datas = $treeTable.bootstrapTable('getData');
        
        selectChilds(datas, row, 'id', 'pid', true); // 选择子类
        
        selectParentChecked(datas, row, 'id', 'pid'); // 选择父类
        
        $treeTable.bootstrapTable('load', datas);
    },
    
    onUncheck: function(row) {
        var datas = $treeTable.bootstrapTable('getData');
        selectChilds(datas, row, 'id', 'pid', false);
        $treeTable.bootstrapTable('load', datas);
    },
    onLoadSuccess: function(data){
        $("[data-toggle='tooltip']").tooltip();
    }
});
  
// 操作按钮
function operateFormatter(value, row, index) {
	var btns = '<a type="button" class="edit-btn btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>'
    		 + '<a type="button" class="delete-btn btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>';
	if (row.type == 'BUTTON' || row._level > 2) {
		return btns;
	}
    return '<a type="button" class="add-btn btn btn-xs btn-default m-r-5" title="新增下级菜单" data-toggle="tooltip"><i class="mdi mdi-plus"></i></a>' + btns;
}

/**
 * 选中父项时，同时选中子项
 * @param datas 所有的数据
 * @param row 当前数据
 * @param id id 字段名
 * @param pid 父id字段名
 */
function selectChilds(datas,row,id,pid,checked) {
    for(var i in datas){
        if(datas[i][pid] == row[id]){
            datas[i].check=checked;
            selectChilds(datas,datas[i],id,pid,checked);
        };
    }
}

function selectParentChecked(datas,row,id,pid){
    for(var i in datas){
        if(datas[i][id] == row[pid]){
            datas[i].check=true;
            selectParentChecked(datas,datas[i],id,pid);
        };
    }
}

function addMenu(pid, title) {
	layerOpen(title, prefix + '/add/' + pid);
}
</script>
</body>
</html>